var tX, tY, ytx, yty, nowX, nowY, l, sw, lw, hw, tw, le, total_h;
var t = false; /**划动开关**/
var tX = 0; /**鼠标点下去时的X轴坐标**/
var tY = 0; /**鼠标点下去时的Y轴坐标**/
var rotate = 0; /**翻转的角度**/
var top_change = 0;
var innerHeight = window.innerHeight,
    innerWidth = window.innerWidth,
    bodyHeight = document.getElementsByClassName("web")[0],
    scrollHeight = document.getElementsByTagName("html")[0].scrollHeight;
var box1 = $('.box')[0];
var box = $('.box').eq(0);
var unlike = $('.unlike');
var like = $('.like');
var changeles_h = 0;

var box_bottom=document.get



var img_scale_h;
/**苹果**/
var img_url = $('.img_h')[0].src;
var img = new Image();
/**改变图片的src**/
img.src = img_url;
/**判断是否有缓存**/
if (img.complete) {
    img_scale_h = innerWidth * 0.8 * img.height / img.width;
} else {
    /**加载完成执行**/
    img.onload = function () {
        img_scale_h = innerWidth * 0.8 * img.height / img.width;
    };
}





$('.box').eq(0).show();

$('.box').on("touchstart", function (e) {
    $(".web").on('touchmove', function (e) {
        e.preventDefault();
    });
    touch = e.originalEvent.targetTouches[0];

    /**点下时，允许鼠标移动，并获取坐标**/
    t = true;
    tX = touch.clientX;
    tY = touch.clientY;

    box.css('transition', '');

})

document.addEventListener("touchmove", function (e) {

    if (t) {

        /**获取移动时的坐标**/
        ytx = e.changedTouches[0].clientX;
        yty = e.changedTouches[0].clientY;

        /**相减**/
        nowX = ytx - tX;
        nowY = yty - tY;

        tX = ytx;
        tY = yty;

        /**小于1 左移，大于1 右移**/
        l = box.css('left');
        if (nowX < 1) {
            box.css('left', parseInt(l) + parseInt(nowX));
            rotate -= nowX / 10;
            if (rotate >= 9) {
                rotate = 9;
            }

            /**修改宽度**/
            sw = $('.box').eq(1).css('width');
            sw = parseInt(sw) - parseInt(nowX) * 8;

            /**修改左边距离**/
            lw = $('.box').eq(1).css('left');
            lw = parseInt(lw) + parseInt(nowX) * 2;

            /**修改高度**/
            hw = $('.box').eq(1).css('height');
            hw = parseInt(hw) - parseInt(nowX) * 8;

            /**修改顶部距离**/
            tw = $('.box').eq(1).css('top');
            tw = parseInt(tw) + parseInt(nowX) * 2;

            if (lw < 125) {
                lw = 125;
            }

            if (sw > 500) {
                sw = 500;
            }

            if (hw > 500) {
                hw = 500;
            }

            if (tw < 100) {
                tw = 100;
            }

            /**修改位置**/
            
            $('.box').eq(1).css('width', sw);
            $('.box').eq(1).css('left', lw);
            $('.box').eq(1).css('height', hw);
            $('.box').eq(1).css('top', tw);

            box.css('transform', 'rotate(' + rotate + 'deg)');

        } else {
            box.css('left', parseInt(l) + parseInt(nowX));

            rotate -= nowX / 10;
            if (rotate <= -9) {
                rotate = -9;
            }

            /**修改宽度**/
            sw = $('.box').eq(1).css('width');
            sw = parseInt(sw) + parseInt(nowX) * 8;

            /**修改左边距离**/
            lw = $('.box').eq(1).css('left');
            lw = parseInt(lw) - parseInt(nowX) * 2;

            /**修改高度**/
            hw = $('.box').eq(1).css('height');
            hw = parseInt(hw) + parseInt(nowX) * 8;

            /**修改顶部距离**/
            tw = $('.box').eq(1).css('top');
            tw = parseInt(tw) - parseInt(nowX) * 2;

            if (lw < 125) {
                lw = 125;
            }

            if (sw > 500) {
                sw = 500;
            }

            if (hw > 500) {
                hw = 500;
            }

            if (tw < 100) {
                tw = 100;
            }

            /**修改位置**/
            
            $('.box').eq(1).css('width', sw);
            $('.box').eq(1).css('left', lw);
            $('.box').eq(1).css('height', hw);
            $('.box').eq(1).css('top', tw);

            box.css('transform', 'rotate(' + rotate + 'deg)');
        }

        h = box.css('top');
        if (nowY < 1) {

            box.css('top', parseInt(h) + parseInt(nowY));

        } else {

            box.css('top', parseInt(h) + parseInt(nowY));

        }
    }
})


document.addEventListener('touchend', function (e) {
    le = box.css('left');

    $(".web").unbind("touchmove");
    if (window.outerWidth < 340) {
        top_change = 95;
    } else if (window.outerWidth < 376) {
        top_change = 105;
    } else if (window.outerWidth <= 414) {
        top_change = 115;
    } else if (window.outerWidth < 480) {
        top_change = 135;
    } else if (window.outerWidth < 780) {
        top_change = 190;
    }
    total_h = img_scale_h + top_change;
    if (parseInt(le) <= window.innerWidth * 0.25) {

        if (parseInt(le) < -140) {
            box.remove();
            box1 = $('.box')[0];
            box = $('.box').eq(0);
            box.css('display', 'block')
                .css('left', '10%')
                .css('width', '80%')
                .css('top', top_change + "px")
                .css('height', total_h + 'px')
                .css('background', '#fff');
        } else {
            box.css('transition', '0.3s')
                .css({
                    transform: 'rotate(0deg)',
                    'top': top_change + "px",
                    'left': '10%'
                });
        }

    } else {

        if (parseInt(le) > window.innerWidth - window.innerWidth * 0.4) {
            box.remove();
            box1 = $('.box')[0];
            box = $('.box').eq(0);
            box.css('display', 'block')
                .css('left', '10%')
                .css('width', '80%')
                .css('top', top_change + "px")
                .css('height', total_h + 'px')
                .css('background', '#fff');
        } else {
            box.css('transition', '0.3s')
                .css({
                    transform: 'rotate(0deg)',
                    'top': top_change + "px",
                    'left': '10%'
                });
        }
    }
})

/**删除之后的回调函数**/
/**移动时的回调函数**/



/**unlike按钮向左删除**/
unlike[0].addEventListener("click", function () {
    if (window.outerWidth < 340) {
        top_change = 95;
    } else if (window.outerWidth < 376) {
        top_change = 105;
    } else if (window.outerWidth <= 414) {
        top_change = 115;
    } else if (window.outerWidth < 480) {
        top_change = 135;
    } else if (window.outerWidth < 780) {
        top_change = 190;
    }
    total_h = img_scale_h + top_change;
    box.css('transition', '0.8s')
        .css('transform', 'translate(-180%,50%) rotate(9deg)');
    setTimeout(function () {
        box.remove();
        box1 = $('.box')[0];
        box = $('.box').eq(0);
        box.css('display', 'block')
            .css('left', '10%')
            .css('width', '80%')
            .css('top', top_change + "px")
            .css('height', total_h + 'px')
            .css('background', '#fff');
    }, 380);
});




/**like按钮向右喜欢**/
like[0].addEventListener("click", function () {
    if (window.outerWidth < 340) {
        top_change = 95;
    } else if (window.outerWidth < 376) {
        top_change = 105;
    } else if (window.outerWidth <= 414) {
        top_change = 115;
    } else if (window.outerWidth < 480) {
        top_change = 135;
    } else if (window.outerWidth < 780) {
        top_change = 190;
    }
    total_h = img_scale_h + top_change;
    box.css('transition', '0.8s')
        .css('transform', 'translate(180%,50%) rotate(-9deg)');
    setTimeout(function () {
        box.remove();
        box1 = $('.box')[0];
        box = $('.box').eq(0);
        box.css('display', 'block')
            .css('left', '10%')
            .css('width', '80%')
            .css('top', top_change + "px")
            .css('height', total_h + 'px')
            .css('background', '#fff');
    }, 380);
});



/**控制屏幕高度**/
if (innerHeight < scrollHeight) {
    bodyHeight.setAttribute("style", "height:" + scrollHeight + "px");
}